<template>
  <div class="page-header-index-wide">
    <a-card>
      <div style="display: flex;justify-content: space-between;">
        <div class="header_card">
          <div>
            <a-avatar style="width: 45px;height: 45px;" :src="avimg" />
          </div>
          <div>
            <div class="font">早上好，凯迪凯迪凯迪凯迪</div>
            <div class="font2">2022-04-24 星期一</div>
          </div>
        </div>
        <div class="right_card">
          <div class="first">
            <div class="du">-18℃</div>
            <div class="tianqi">山东省，当前天气多云转晴</div>
          </div>
          <div class="img">
            <img
              style="width: 50px;height: 50px;"
              src="../../assets/home_img/tianqi.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </a-card>
    <br />
    <a-card>
      <div class="dataheader">
        <div style="width: 80%;">
          <div class="hexin">昨日核心数据</div>
          <div class="detetime">2024年05月12日</div>
        </div>
        <div>
          <a-select style="width: 200px;margin-top: 12px;" v-model="count">
            <a-select-option value="0">核心数据分析</a-select-option>
          </a-select>
        </div>
        <br />
      </div>
      <br>
      <div class="firstrow">
        <div class="firstrow_card">
            <div class="firtrow_title">累计用户数</div>
            <div class="firtrow_num">163</div>
            <div  class="box"><span class="firtrow_day">日</span><span class="first_percentage" :style="{color:'red'}">0%</span></div>
            <div  class="box"><span  class="firtrow_day">周</span><span class="first_percentage"  :style="{color:'green'}">3.82%</span></div>
            <div  class="box"><span  class="firtrow_day">月</span><span class="first_percentage"  :style="{color:'green'}">22.56%</span></div>
        </div>
        <div class="firstrow_card">
          <div class="firtrow_title">打开次数</div>
            <div class="firtrow_num">1</div>
            <div  class="box"><span class="firtrow_day">日</span><span class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div  class="box"><span class="firtrow_day">周</span><span class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div  class="box"><span class="firtrow_day">月</span><span class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
        <div class="firstrow_card">
          <div class="firtrow_title">访问人数</div>
            <div class="firtrow_num">1</div>
            <div class="box"><span class="firtrow_day">日</span><span  class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div class="box"><span class="firtrow_day">周</span><span  class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div class="box"><span class="firtrow_day">月</span><span  class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
        <div class="firstrow_card4">
          <div class="firtrow_title">新增用户</div>
            <div class="firtrow_num">0</div>
            <div class="box"><span  class="firtrow_day">日</span><span class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div class="box"><span  class="firtrow_day">周</span><span class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div class="box"><span  class="firtrow_day">月</span><span class="first_percentage"  :style="{color:'red'}"> 22.56%</span></div>
        </div>
      </div>
      <br>
      <br>

      <div class="firstrow">
        <div class="firstrow_card">
          <div class="firtrow_title">活跃日留存</div>
            <div class="firtrow_num">0%</div>
            <div  class="box"><span class="firtrow_day">日</span><span class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div  class="box"><span class="firtrow_day">周</span><span class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div  class="box"><span class="firtrow_day">月</span><span class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
        <div class="firstrow_card">
          <div class="firtrow_title">新增日留存</div>
            <div class="firtrow_num">0%</div>
            <div class="box"><span class="firtrow_day">日</span><span  class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div class="box"><span class="firtrow_day">周</span><span  class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div class="box"><span class="firtrow_day">月</span><span  class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
        <div class="firstrow_card">
          <div class="firtrow_title">总添加人数</div>
            <div class="firtrow_num">0</div>
            <div class="box"><span class="firtrow_day">日</span><span  class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div class="box"><span class="firtrow_day">周</span><span  class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div class="box"><span class="firtrow_day">月</span><span  class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
        <div class="firstrow_card4">
          <div class="firtrow_title">新添加人数</div>
            <div class="firtrow_num">0</div>
            <div class="box"><span class="firtrow_day">日</span><span  class="first_percentage"  :style="{color:'red'}">0%</span></div>
            <div class="box"><span class="firtrow_day">周</span><span  class="first_percentage"  :style="{color:'red'}">3.82%</span></div>
            <div class="box"><span class="firtrow_day">月</span><span  class="first_percentage"  :style="{color:'red'}">22.56%</span></div>
        </div>
      </div>
      <br>
      <br>
    </a-card>
    <br>
    <!-- <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          :imgtype="1"
          title="用户总量"
          total="75,845"
          class="kapian"
        >
          <div>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">周比昨日下降了</span>
              12%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="他币总收入"
          :imgtype="2"
          total="1,2345"
          class="kapian2"
        >
          <div>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">周比昨日下降了</span>
              12%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card
          :loading="loading"
          title="专家总量"
          :imgtype="3"
          total="256"
          class="kapian3"
        >
          <div>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">周比昨日下降了</span>
              12%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="咨询单总量" total="78%" :imgtype="4"  class="kapian4">
          <div>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">周比昨日下降了</span>
              12%
            </trend>
          </div>
        </chart-card>
      </a-col>
    </a-row> -->

    <div style="display: flex;justify-content: space-between;">
      <a-card
        :loading="loading"
        :bordered="false"
        :body-style="{ padding: '0' }"
        style="width: 49%;"
      >
        <div class="salesCard">
          <a-tabs
            default-active-key="1"
            size="large"
            :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"
          >
            <div class="extra-wrapper" slot="tabBarExtraContent">
              <div class="extra-item">
                <a>今日</a>
                <a>本周</a>
                <a>本月</a>
                <a>本年</a>
              </div>
              <a-range-picker :style="{ width: '256px' }" />
            </div>
            <a-tab-pane tab="用户增长" key="1">
              <bar title="注册用户增长" :dataSource="barData" />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
      <a-card
        :loading="loading"
        :bordered="false"
        :body-style="{ padding: '0' }"
        style="width: 50%;"
      >
        <div class="salesCard">
          <a-tabs
            default-active-key="1"
            size="large"
            :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"
          >
            <div class="extra-wrapper" slot="tabBarExtraContent">
              <div class="extra-item">
                <a>今日</a>
                <a>本周</a>
                <a>本月</a>
                <a>本年</a>
              </div>
              <a-range-picker :style="{ width: '256px' }" />
            </div>
            <a-tab-pane
              loading="true"
              tab="专家增长"
              key="1"
              style="width: 200px;"
            >
              <a-row>
                <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                  <div
                    style="width:600px;height:200px;padding-bottom: 306px;    padding-left: 32px;"
                  >
                    <area-chart-ty
                      title="入住专家增长"
                      :dataSource="barData"
                      x="月份"
                      y="入住专家增长"
                      :height="306"
                    />
                  </div>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </div>
    <br />
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-card>
          <area-chart-ty
            title="他币收入"
            :dataSource="barData"
            x="月份"
            y="销售额"
          />
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-card>
          <div>用户占比</div>
          <pie></pie>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-card>
          <line-chart-multid
            :dataSource="xljgData"
            :fields="xljgFields"
            title="咨询单数"
          ></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>
    <!-- <a-card>
      <line-chart-multid :dataSource="xljgData1" :fields="xljgFields" title="实时访问数据"></line-chart-multid>
      <Linechart></Linechart>
    </a-card> -->
  </div>
</template>

<script>
import ChartCard from "@/components/ChartCard";
import ACol from "ant-design-vue/es/grid/Col";
import ATooltip from "ant-design-vue/es/tooltip/Tooltip";
import MiniArea from "@/components/chart/MiniArea";
import MiniBar from "@/components/chart/MiniBar";
import MiniProgress from "@/components/chart/MiniProgress";
import RankList from "@/components/chart/RankList";
import Bar from "@/components/chart/Bar";
import LineChartMultid from "@/components/chart/LineChartMultid";
import HeadInfo from "@/components/tools/HeadInfo.vue";
import Trend from "@/components/Trend";
import AreaChartTy from "@/components/chart/AreaChartTy";
import PieChart from "@/components/chart/PieChart";
import Pie from "@/components/chart/Pie";
import moment from 'moment'
import { getLoginfo, getVisitInfo } from "@/api/api";
import { getCountUser, getWxToken } from '@/api/dashboard'
import Linechart from './Linechart'
const rankList = [];
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: "白鹭岛 " + (i + 1) + " 号店",
    total: 1234.56 - i * 100,
  });
}
const barData = [];
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  });
}
const xljgData = [
  { type: "一月", 咨询单数: 100 },
  { type: "二月", 咨询单数: 200 },
  { type: "三月", 咨询单数: 300 },

  { type: "四月", 咨询单数: 400 },
  { type: "五月", 咨询单数: 500 },
  { type: "六月", 咨询单数: 600 },

  { type: "七月", 咨询单数: 700 },
  { type: "八月", 咨询单数: 800 },
  { type: "九月", 咨询单数: 900 },

  { type: "十月", 咨询单数: 400 },
  { type: "十一月", 咨询单数: 500 },
  { type: "十二月", 咨询单数: 600 },
];
const xljgData1 = [
  { type: "一月", 咨询单数: 100 },
  { type: "二月", 咨询单数: 200 },
  { type: "三月", 咨询单数: 300 },

  { type: "四月", 咨询单数: 400 },
  { type: "五月", 咨询单数: 500 },
  { type: "六月", 咨询单数: 600 },

  { type: "七月", 咨询单数: 700 },
  { type: "八月", 咨询单数: 800 },
  { type: "九月", 咨询单数: 900 },

  { type: "十月", 咨询单数: 400 },
  { type: "十一月", 咨询单数: 500 },
  { type: "十二月", 咨询单数: 600 },
];
const xljgFields = ["咨询单数"];
export default {
  name: "IndexChart",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    AreaChartTy,
    PieChart,
    Pie,
    Linechart
  },
  data() {
    return {
      count:'0',
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ["ip", "visit"],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      imgtype: "",
      avimg: JSON.parse(localStorage.getItem("pro__Login_Userinfo")).value
        .avatar,
      xljgData,
      xljgData1,
      xljgFields,
    };
  },
  async created() {
    setTimeout(() => {
      this.loading = !this.loading;
    }, 1000);
    this.initLogInfo();
    const wxtoken = await getWxToken({
      APPID: 'wx100a685788849752',
      SECRET: '7e68e3616c86dd8b35e4296236a51eba'
    })
    console.log(wxtoken);
    //获取前一天的日期
    const date = moment();
    const aa = date.subtract(1, 'days')
    const yesterday = aa.format('YYYYMMDD')
    const params = {
      access_token: wxtoken.access_token,
      begin_date: yesterday,
      end_date: yesterday
    }
    const res = await getCountUser(params)
    console.log(res, '获取累计用户数量')
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + "";
          });
          this.loginfo = res.result;
        }
      });
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header_card {
  width: 260px;
  display: flex;
  justify-content: space-between;
  .font {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
  }
  .font2 {
    font-size: 14px;
    color: #999999;
  }
}
.right_card {
  width: 370px;
  display: flex;
  justify-content: space-between;
  .first {
    text-align: right;
    width: 240px;
    align-content: right;
    .du {
      font-size: 20px;
      font-weight: 600;
    }
    .tianqi {
      font-size: 14px;
      color: #999999;
    }
  }
  .img {
    width: 100px;
  }
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.kapian {
  background-image: url(~@/assets/home_img/beijing.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.kapian2 {
  background-image: url(~@/assets/home_img/beijing2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.kapian3 {
  background-image: url(~@/assets/home_img/beijing3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.kapian4 {
  background-image: url(~@/assets/home_img/beijing4.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.dataheader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .hexin {
    font-size: 24px;
    font-weight: 500;
    color: black;
  }
  .detetime {
    font-size: 17px;
    color: #999999;
  }
}
.firstrow {
  display: flex;
  justify-content: space-between;
  .firstrow_card {
    width: 25%;
    border-right: 1px solid #e4e1e1;
    height: 133px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .firtrow_title{
      font-size: 16px;
      color: #999999;
    }
    .box{
      width: 300px;
    }
    .firtrow_num{
      font-size: 30px;
      color: black;
      font-weight: 500;
    }
    .firtrow_day{
      width: 100px;
      color: #999999;
      padding-left: 110px;
    }
    .first_percentage{
      color: #999999;
      display: inline-block;
      padding-left: 33px;
    }
  }
  .firstrow_card4{
    width: 25%;
    height: 133px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .firtrow_title{
      font-size: 16px;
      color: #999999;
    }
    .box{
      width: 300px;
    }
    .firtrow_num{
      font-size: 30px;
      color: black;
      font-weight: 500;
    }
    .firtrow_day{
      width: 100px;
      color: #999999;
      padding-left: 110px;
    }
    .first_percentage{
      color: #999999;
      display: inline-block;
      padding-left: 33px;
    }
    }
}
</style>
